<!doctype html>
<html lang="zh-CN">
<head>
    <title>头像上传</title>
    {% include 'admin/common/header.html' %}
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
    <div class="layui-col-xs9">
        <div style="height:325px;background-color: rgb(247, 247, 247);">
            <img id="sourceImage" src="">
        </div>
    </div>
    <div class="layui-col-xs3" style="padding-left:0px;">
        <div id="previewImage"
             style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate"
                    data-option="-15" title="左旋15°"></button>
            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate"
                    data-option="15" title="右旋15°"></button>
            <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset"
                    title="重置"></button>
            <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload"
                   title="选择图片"></label>
            <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
        </div>
        <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
        <input type="text" hidden value="{{ current_user.id }}" id="user_id">
    </div>
</div>


{% include 'admin/common/footer.html' %}
<script>
  layui.use(['jquery', 'layer', 'cropper', 'popup'], function() {
    let $ = layui.jquery;
    let layer = layui.layer;
    let cropper = layui.cropper;
    let popup = layui.popup;

    let options = {
      aspectRatio: 1 / 1, // 裁剪框比例
      preview: '#previewImage', // 预览div
      viewmode: 1,
    };

    $('#sourceImage').attr('src', parent.layui.$('#avatar').attr('src'));
    $('#sourceImage').cropper(options);

    window.submitForm = function() {
      $('#sourceImage').crossOrigin = 'anonymous';//解决跨域图片问题
      $('#sourceImage').cropper('getCroppedCanvas', {
        width: 280,
        height: 140,
      }).toBlob(function(blob) {
        let timeStamp = Date.parse(new Date());
        let fileName = timeStamp + '.jpg';
        let formData = new FormData();
        formData.append('file', blob, fileName);
        formData.append('fileName', fileName);
        formData.append('fileToken', timeStamp);
        $.ajax({
          method: 'post',
          url: '/api/v1/file/photos', //用于文件上传的服务器端请求地址
          data: formData,
          processData: false,
          contentType: false,
          success: function(result) {
            if (result.success) {
              // 修改 avatar 字段
              $.ajax({
                method: 'put',
                url: '/api/v1/users/user/' + $('#user_id').val() + '/avatar',
                data: JSON.stringify({avatar: result.data}),
                dataType: 'json',
                contentType: 'application/json',
                success: function(res) {
                  if (res.success) {
                    // 关闭当前弹层
                    parent.layui.$('#avatar').attr('src', result.data.src);
                    top.layui.$('#avatar').attr('src', result.data.src);
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                  } else {
                    popup.failure('上传失败');
                  }
                },
              });
            } else {
              popup.failure('上传失败');
            }
          },
        });
      });
    };

    $('.pear-btn').on('click', function() {
      let event = $(this).attr('cropper-event');
      if (event === 'rotate') {
        let option = $(this).attr('data-option');
        $('#sourceImage').cropper('rotate', option);
      } else if (event === 'reset') {
        $('#sourceImage').cropper('reset');
      }
      $('#uploadPicture').change(function() {
        let r = new FileReader();
        let f = this.files[0];
        let uploadFileSize = f.size / 1024;
        if (uploadFileSize > 5120) {
          parent.layer.msg('上传文件不得超过5m', {icon: 5});
          return false;
        }
        r.readAsDataURL(f);
        r.onload = function(e) {
          $('#sourceImage').cropper('destroy').attr('src', this.result).cropper(options);
        };
      });
    });
  });
</script>
</body>
</html>